<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>
        Add Graphics to a SceneView | Sample | ArcGIS API for JavaScript 4.18
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/Map", "esri/views/SceneView", "esri/layers/GraphicsLayer", "esri/Graphic"],
            (Map, SceneView, GraphicsLayer, Graphic)=>{
            let map = new Map({
                basemap: "hybrid"
            });

            let view = new SceneView({
                container: "viewDiv",
                map: map,
                camera: {
                    position: {
                        x: -0.17746710975334712,
                        y: 51.44543992422466,
                        z: 1266.7049653716385
                    },
                    heading: 0.34445102566290225,
                    tilt: 82.95536300536367
                }
            });

            //添加图形层
            let graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            graphicsLayer.add(new Graphic({
                //添加 3D 点图形,伦敦
                geometry: {
                    type: "point", // autocasts as new Point()
                    x: -0.178,
                    y: 51.48791,
                    z: 1010
                },
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    color: [226, 119, 40],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 2
                    }
                }
            }));


            graphicsLayer.add( new Graphic({
                //添加 3D 折线图形
                geometry: {
                    type: "polyline", // autocasts as new Polyline()
                    paths: [
                        [-0.178, 51.48791, 0],
                        [-0.178, 51.48791, 1000]
                    ]
                },
                symbol: {
                    type: "simple-line", // autocasts as SimpleLineSymbol()
                    color: [226, 119, 40],
                    width: 4
                }
            }));


            graphicsLayer.add( new Graphic({
                //添加 3D 多边形图形
                geometry: {
                    type: "polygon", // autocasts as new Polygon()
                    rings: [
                        [-0.184, 51.48391, 400],
                        [-0.184, 51.49091, 500],
                        [-0.172, 51.49091, 500],
                        [-0.172, 51.48391, 400],
                        [-0.184, 51.48391, 400]
                    ]
                },
                symbol: {
                    type: "simple-fill", // autocasts as new SimpleFillSymbol()
                    color: [227, 139, 79, 0.8],
                    outline: {
                        // autocasts as new SimpleLineSymbol()
                        color: [255, 255, 255],
                        width: 1
                    }
                }
            }));
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
